define(function(require, exports, module) {
	require('component/common/PageGrid.js');
	/**<pre>分页list列表弹出框选择器：目前用于资源导入时的选择框
	 * 1)查询条件input
	 * 2)查询
	 * 3)分页列表
	 * 4)确定按钮
	 * 5)支持check或radio，多选，单选
	 * 6)提供api：弹出(已选择ids)，关闭，获取数据(获得选择的ids)
	 * setting={
	 * 		id="";
	 * 		title:'标题',
	 * 		width:'600px'
	 * 		param:[{name:'',code:'',value:''}]
	 *		checkOpt:true|false,			//是否有复选框列
	 *		radioOpt:true|false,			//是否有单选框列
	 *		keyColumn:'',					//主键列
	 *		showColumn:'xx,yy',
	 *		columns:[{title:'',code:''}],	//列信息
	 *		dataURL:'',	//数据来源的url,
	 *		data:{'keyColumn':{showColumn:}},
	 *		onSure:function(data,commandData){}
	 * }
	 * </pre>*/
	var ModalListSelector=function(setting){
		//先保证以来的组件已被加载成功
		this.setting={
			width:'600px',
			data:{}
		};
		$.extend(true,this.setting,setting);
		
		this.data=this.setting.data;
		$.extend(true,this.tempData,this.data);
		this.id=setting.id;
		this.init();
	};
	ModalListSelector.prototype={
		render:function(){
			this.renderSkeleton();
			this.renderSearchForm();
			this.renderList();
		},
		renderSkeleton:function(){
			var html=[];
			html.push('<div class="modal fade ModalListSelector" id="'+this.id+'" tabindex="-1" role="dialog" aria-labelledby="modalListSelector-'+this.id+'-Label">');
			html.push('  <div class="modal-dialog" role="document" style="width:'+this.setting.width+'">');
			html.push('    <div class="modal-content">');
			html.push('      <div class="modal-header">');
			html.push('        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>');
			html.push('        <h4 class="modal-title" id="modalListSelector-'+this.id+'-Label">'+this.setting.title+'</h4>');
			html.push('      </div>');
			html.push('      <div class="modal-body" >');
			html.push('      	<form class="form-horizontal" id="modalListSelector-'+this.id+'-Form" role="form"></form>');
			html.push('      	<div id="modalListSelector-'+this.id+'-resourceTemp"></div>');
			html.push('      </div>');
			html.push('      <div class="modal-footer" style="margin:0px;padding:10px 20px;">');
			html.push('        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>');
			html.push('        <button type="button" class="btn btn-primary btnSure">确定</button>');
			html.push('      </div>');
			html.push('    </div>');
			html.push('  </div>');
			html.push('</div>');
			this.$id=$(html.join(''));
			this.$searchForm=this.$id.find('#modalListSelector-'+this.id+'-Form');
			this.$modalBody=this.$id.find('.modal-body');
		},
		renderSearchForm:function(){//param:[{name:'',code:'',value:''}]
			if(!this.setting.param||this.setting.param.length==0)
				return;
			var btnAppend=false,i=0,html=[],param,that=this,length=this.setting.param.length,
				renderParam=function(param){
					html.push('<label for="modalListSelector-'+that.id+'-'+param.code+'" class="input-sm col-xs-2 control-label" style="padding-right:0px;">'+param.name+'：</label>');
					html.push('<div class="col-xs-4" style="padding-left:0px;" >');
					html.push('<input class="input-sm form-control" id="modalListSelector-'+that.id+'-'+param.code+'" value="'+(param.value||'')+'" name="'+param.code+'" />');
					html.push('</div>');
				};
			while(i<length)
			{
				html.push('<div class="form-group ">');
				param=this.setting.param[i++];
				renderParam(param);
				param=this.setting.param[i++];
				if(param)
					renderParam(param);
				else
				{
					html.push('<div class="col-xs-3"><button type="button" class="input-sm btn btn-default btnSearch">查询</button>&nbsp;<button type="button" class="input-sm btn btn-default btnReset">重置</button></div>');
					btnAppend=true;
				}	
				html.push('</div>');
			}
			if(!btnAppend)
			{
				html.push('<div class="form-group ">');
				html.push('<div class="col-xs-offset-9 col-xs-3" style="padding-right:0" ><button type="button" class="input-sm btn btn-default btnSearch">查询</button>&nbsp;<button type="button" class="input-sm btn btn-default btnReset">重置</button></div>');
				html.push('</div>');
			}	
			this.$searchForm.append(html.join(''));
		},
		renderList:function(){
			var param={},that=this;
			this.setting.param&&$.each(this.setting.param,function(){
				param[this.code]=this.value;
			});
			this.pageGrid=new PageGrid({
				id:'modalListSelector-'+this.id+'-resource',
				attachId:'modalListSelector-'+this.id+'-resourceTemp',	//创建好的pageGrid要放在那个地方，attachId的标签在创建后会被删除。
				minHeight:'234px',
				maxFieldLength:15,
				checkOpt:this.setting.checkOpt,			//是否有复选框列
				radioOpt:this.setting.radioOpt,
				keyColumn:this.setting.keyColumn,		//主键列
				columns:this.setting.columns,	
				dataURL:this.setting.dataURL,	//数据来源的url
				page:{enable:true, pageSize:5, mini:true },
				afterLoadData:function(){
					that.selectRecord();
				},
				onClickRecord:function(check,record){
					//改变data
					if(check)
					{
						var res=record;
						if(that.setting.showColumn)
						{
							var fields=that.setting.showColumn.split(",");
							res={};
							$.each(fields,function(){
								res[this]=record[this];
							});
						}	
						that.tempData[record[that.setting.keyColumn]]=res;
					}
					else
						delete that.tempData[record[that.setting.keyColumn]];
				}
			},{param:param}); 
			this.$modalBody.append(this.pageGrid.$id);
		},
		/**给列表打勾*/
		selectRecord:function(){
			var keyArray=[];
			for(key in this.tempData)
				keyArray.push(key);
			this.pageGrid.selectRecord(keyArray);
		},
		bind:function(){
			var that=this;
			this.$id.find('.btnSure').on('click',function(){
				that.data=that.tempData;
				that.setting.onSure&&that.setting.onSure(that.data,that.commandData);
				that.$id.modal('hide');
			});
			this.$searchForm.find('.btnSearch').on('click',function(){
				var paramArray=that.$searchForm.serializeArray(),param={};
				$.each(paramArray,function(){
					param[this.name]=this.value;
				});
				that.pageGrid.load(param);
			});
			this.$searchForm.find('.btnReset').on('click',function(){
				$('input',that.$searchForm).val('');
			});
		},
		getData:function(){
			return this.data;
		},
		show:function(data,commandData){
			this.$id.modal('show');
			this.tempData={};
			data&&(this.data=data);
			this.commandData=commandData;
			$.extend(true,this.tempData,this.data);
			this.selectRecord();
		},
		sync:function(){
			
		},
		init:function(){
			this.render();
			this.bind();
			this.sync();
		}
	};
	window['ModalListSelector']=ModalListSelector;
});

/**
 * <div class="modal fade ModalListSelector" id="${id}" tabindex="-1" role="dialog" aria-labelledby="modalListSelector-${id}-Label">
  <div class="modal-dialog" role="document" style="width:${width}">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="modalListSelector-${id}-Label">${title}</h4>
      </div>
      <div class="modal-body" >
      	<div>
      	<form class="form-horizontal" id="modalListSelector-${id}-Form" role="form">
			<div class="form-group ">
				<label for="modalListSelector-${id}-${param.code}" class="input-sm col-xs-2 control-label" style="padding-right:0px;">${param.name}:</label>
				<div class="col-xs-3" style="padding-left:0px;" >
					<input class="input-sm form-control" id="modalListSelector-${id}-${param.code}"  name="${param.code}" />
				</div>
				<label for="modalListSelector-${id}-${param.code}" class="input-sm col-xs-2 control-label" style="padding-right:0px;">${param.name}:</label>
				<div class="col-xs-3" style="padding-left:0px;" >
					<input class="input-sm form-control" id="modalListSelector-${id}-${param.code}"   name="${param.code}" />
				</div>
				<div class="col-xs-2">
					<button type="button" class="input-sm btn btn-default btnSearch">查询</button>
				</div>
			</div>
			<!-- <div class="form-group ">
				<label for="modalListSelector-${id}-${param.code}" class="input-sm col-xs-2 control-label" style="padding-right:0px;">${param.name}:</label>
				<div class="col-xs-3" style="padding-left:0px;" >
					<input class="input-sm form-control" id="modalListSelector-${id}-${param.code}"  name="${param.code}" />
				</div>
				<label for="modalListSelector-${id}-${param.code}" class="input-sm col-xs-2 control-label" style="padding-right:0px;">${param.name}:</label>
				<div class="col-xs-3" style="padding-left:0px;" >
					<input class="input-sm form-control" id="modalListSelector-${id}-${param.code}"   name="${param.code}" />
				</div>
			</div> -->
			</form>
      	</div>
      	<div id="modalListSelector-${id}-resourceTemp"></div>
      </div>
      <div class="modal-footer" style="margin:0px;padding:10px 20px;">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">确定</button>
      </div>
    </div>
  </div>
</div>
 */
